<template>
    <div>
        <span>品类开通数量：{{catIds.length}} 个</span>
        <el-tree
        style='margin-top:20px'
        :data="cateTree"
        show-checkbox 
        accordion
        node-key="catId"
        :indent="25"
        :default-checked-keys="catIds"
        @check-change="handleCheckChange">
        </el-tree>
   </div>
</template>

<script>
export default {
    name: 'merchantCatEditer',
    data() {
      return {
      };
    },
    methods: {
       handleCheckChange:function(data, checked, indeterminate){
           if(data.levelNum==2){
               var i=this.catIds.indexOf(data.catId);
               if(checked){
                   if(i==-1)this.catIds.push(data.catId);
               }else{
                    if(i!=-1)this.catIds.splice(i,1);
                }
            }else if(!indeterminate){
                var children=data.children;
                if(checked){
                    for(var i=0;i<children.length;i++){
                        if(this.catIds.indexOf(children[i].catId)==-1)this.catIds.push(children[i].catId);
                    }
                }else{
                    for(var i=0;i<children.length;i++){
                        var j=this.catIds.indexOf(children[i].catId);
                        if(j!=-1)this.catIds.splice(j,1);
                    }
                }
            }
        },
    },
    created:function(){
        
    },
    props:['catIds',"cateTree"]
}

</script>

<style scoped>

</style>
